<template>
    <page-meta :page-style="$theme.pageStyle">
        <!-- #ifndef H5 -->
        <!-- u-navbar is-fixed="false" 时不显示占位符，需要手动添加顶部间距 -->
        <view class="navbar-safe-area">
            <u-navbar
                :is-back="false"
                title="个人中心"
				:background="{ background: `${$theme.navBgColor}` }"
				:title-color="$theme.navColor" 
                :title-bold="false"
                :is-fixed="false"
                :border-bottom="false"                
            ></u-navbar>
        </view>
        <!-- #endif -->
    </page-meta>
    <view class="user">
        <view v-for="(item, index) in state.pages" :key="index">
            <template v-if="item.name == 'user-info'">
                <w-user-info
                    :content="item.content"
                    :styles="item.styles"
                    :user="userInfo"
                    :is-login="isLogin"
                />
            </template>
            <!-- <template v-if="item.name == 'my-order'">
                <w-user-order :content="item.content" :userInfo="userInfo" :styles="item.styles" />
            </template> -->
            <template v-if="item.name == 'my-service'">
                <w-my-service 
                    :content="{ ...item.content, data: item.content?.data?.slice(0, -1) || [] }" 
                    :styles="item.styles" 
                    :user="userInfo" 
                />
            </template>
            <!-- <template v-if="item.name == 'user-banner'">
                <w-user-banner :content="item.content" :styles="item.styles" />
            </template>
            <template v-if="item.name == 'all-buy'">
                <w-all-buy :content="item.content" :styles="item.styles" />
            </template> -->
        </view>

        <!-- 骨袈屏 -->
        <skeleton v-if="state.loading"></skeleton>
    </view>
</template>

<script setup lang="ts">
import { getDecorate } from '@/api/shop'
import { getGoodsLists } from '@/api/goods'
import { useUserStore } from '@/stores/user'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { storeToRefs } from 'pinia'
import { nextTick, reactive, shallowRef, ref } from 'vue'

import Skeleton from '@/pages/user/component/skeleton.vue'

// 延迟初始化 store，避免在 Pinia 未完全初始化时调用
let userStore: ReturnType<typeof useUserStore> | null = null
const userInfo = ref<any>({})
const isLogin = ref(false)

// 在 onLoad 中初始化 store，确保 Pinia 已完全初始化
onLoad(() => {
    userStore = useUserStore()
    const storeRefs = storeToRefs(userStore)
    userInfo.value = storeRefs.userInfo.value
    isLogin.value = storeRefs.isLogin.value
})

const paging = shallowRef()
const state = reactive<{
    loading: boolean
    pages: any[]
    goods_list: any[]
}>({
    loading: true,
    pages: [],
    goods_list: []
})

const getData = async () => {
    try {
        const data = await getDecorate({ id: 2 })
        state.pages = JSON.parse(data.pages)
    } catch (error) {
        console.log(error)
    }
    await nextTick()
    state.loading = false
}

const queryList = async (pageNo: number) => {
    try {
        const { lists } = await getGoodsLists({
            type: 'hot',
            pageNo: pageNo,
            pageSize: 20
        })
        paging.value.complete(lists)
    } catch (e) {
        console.log('报错=>', e)
        //TODO handle the exception
        paging.value.complete(false)
    }
}

onShow(async () => {
    if (!userStore) {
        userStore = useUserStore()
        const storeRefs = storeToRefs(userStore)
        userInfo.value = storeRefs.userInfo.value
        isLogin.value = storeRefs.isLogin.value
    }
    await getData()
    if (userStore) {
        await userStore.getUser()
        await userStore.getShopCartCount()
        const storeRefs = storeToRefs(userStore)
        userInfo.value = storeRefs.userInfo.value
        isLogin.value = storeRefs.isLogin.value
    }
})
</script>

<style lang="scss" scoped>
.recommend-goods {
    &-title {
        margin-top: 20rpx;
        padding: 26rpx 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 34rpx;
        color: #ff612f;
        padding: 30 rpx 0 10 rpx 0;
        text-align: center;
    }
}

// APP 端导航栏安全区域
.navbar-safe-area {
    // #ifdef APP-PLUS
    padding-top: env(safe-area-inset-top);
    // #endif
}

// APP 端页面内容需要避开导航栏
.user {
    // #ifdef APP-PLUS
    margin-top: 44px;
    // #endif
}
</style>
